<template>
  <div class="ai-problem-generator">
    <!-- 美化后的页面头部 -->
    <div class="page-header">
      <div class="header-background">
        <div class="gradient-overlay"></div>
        <div class="floating-shapes">
          <div class="shape shape-1"></div>
          <div class="shape shape-2"></div>
          <div class="shape shape-3"></div>
        </div>
      </div>
      
      <div class="header-content">
        <div class="header-icon">
          <el-icon class="pulse-glow"><Star /></el-icon>
        </div>
        <h1 class="main-title">AI智能出题系统</h1>
        <p class="main-subtitle">
          智能算法驱动，一键生成高质量编程题目
          <br>支持多种题型，满足不同教学需求
        </p>
        <div class="feature-badges">
          <span class="badge">🤖 AI智能</span>
          <span class="badge">🎯 精准匹配</span>
          <span class="badge">⚡ 快速生成</span>
          <span class="badge">🔄 自动保存</span>
        </div>
      </div>
    </div>

    <el-card class="generator-card">`

      <!-- 出题配置区域 -->
      <template #header>
        <div class="section-header">
          <h3>🛠️ 配置出题参数</h3>
          <p>设置题目类型、难度和相关参数</p>
        </div>
      </template>

      <div class="config-section">
        <el-form :model="generateForm" label-width="120px" class="generate-form">
          <!-- 基础配置卡片 -->
          <div class="config-group">
            <div class="group-title">
              <h4>📋 基础配置</h4>
              <p>选择题目类型和难度等级</p>
            </div>
            
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="题目类型" required>
                  <el-radio-group v-model="generateForm.problemType" class="type-selector">
                    <el-radio-button label="code" class="type-btn">
                      <div class="btn-content">
                        <span class="icon">💻</span>
                        <span>编程题</span>
                      </div>
                    </el-radio-button>
                    <el-radio-button label="choice" class="type-btn">
                      <div class="btn-content">
                        <span class="icon">✅</span>
                        <span>选择题</span>
                      </div>
                    </el-radio-button>
                    <el-radio-button label="blank" class="type-btn">
                      <div class="btn-content">
                        <span class="icon">📝</span>
                        <span>填空题</span>
                      </div>
                    </el-radio-button>
                    <el-radio-button label="short" class="type-btn">
                      <div class="btn-content">
                        <span class="icon">📄</span>
                        <span>简答题</span>
                      </div>
                    </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="难度等级">
                  <el-select v-model="generateForm.difficulty" placeholder="选择难度" class="difficulty-select">
                    <el-option label="🟢 简单" value="easy" />
                    <el-option label="🟡 中等" value="medium" />
                    <el-option label="🔴 困难" value="hard" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="题目主题" required>
            <el-input
              v-model="generateForm.topic"
              placeholder="请输入题目主题，如：数组排序、链表反转、动态规划等"
              clearable
                class="topic-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
          </el-form-item>
          </div>`

          <!-- 编程题特有配置 -->
          <div v-if="generateForm.problemType === 'code'" class="config-group special-config">
            <div class="group-title">
              <h4>⚙️ 编程题专项配置</h4>
              <p>设置编程语言和算法类型</p>
            </div>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="编程语言">
                  <el-select v-model="generateForm.language" placeholder="选择语言" class="language-select">
                    <el-option label="🐍 Python" value="python" />
                    <el-option label="⚡ C++" value="cpp" />
                    <el-option label="☕ Java" value="java" />
                    <el-option label="🟨 JavaScript" value="javascript" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="算法类型">
                  <el-select v-model="generateForm.algorithmType" placeholder="选择算法类型" clearable class="algorithm-select">
                    <el-option label="🔢 排序算法" value="sorting" />
                    <el-option label="🔍 搜索算法" value="searching" />
                    <el-option label="📊 动态规划" value="dp" />
                    <el-option label="🕸️ 图论算法" value="graph" />
                    <el-option label="📝 字符串算法" value="string" />
                    <el-option label="🗂️ 数据结构" value="data-structure" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>`

          <!-- 选择题特有配置 -->
          <div v-if="generateForm.problemType === 'choice'" class="config-group special-config">
            <div class="group-title">
              <h4>✅ 选择题专项配置</h4>
              <p>设置单选/多选和选项数量</p>
            </div>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="题目类型">
                  <el-radio-group v-model="generateForm.questionType" class="question-type-group">
                    <el-radio-button label="single">
                      <div class="radio-content">
                        <span class="icon">⚪</span>
                        <span>单选题</span>
                      </div>
                    </el-radio-button>
                    <el-radio-button label="multiple">
                      <div class="radio-content">
                        <span class="icon">☑️</span>
                        <span>多选题</span>
                      </div>
                    </el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选项数量">
                  <el-input-number
                    v-model="generateForm.optionCount"
                    :min="2"
                    :max="6"
                    :step="1"
                    class="option-counter"
                  />
                  <div class="counter-hint">推荐 3-5 个选项</div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 填空题特有配置 -->
          <div v-if="generateForm.problemType === 'blank'" class="config-group special-config">
            <div class="group-title">
              <h4>📝 填空题专项配置</h4>
              <p>设置填空数量</p>
            </div>
            
            <el-form-item label="填空数量">
              <el-input-number
                v-model="generateForm.blankCount"
                :min="1"
                :max="10"
                :step="1"
                class="blank-counter"
              />
              <div class="counter-hint">建议 1-5 个填空</div>
            </el-form-item>
          </div>`

          <!-- 扩展配置 -->
          <div class="config-group">
            <div class="group-title">
              <h4>🎯 扩展配置</h4>
              <p>设置知识点和保存选项</p>
          </div>

          <el-form-item label="知识点">
            <el-input
              v-model="generateForm.knowledgePoints"
              placeholder="请输入相关知识点，如：数组、链表、递归等"
              clearable
                class="knowledge-input"
              >
                <template #prefix>
                  <el-icon><Collection /></el-icon>
                </template>
              </el-input>
          </el-form-item>

            <el-form-item class="auto-save-item">
              <el-checkbox v-model="generateForm.autoSave" class="auto-save-checkbox">
                <span class="checkbox-text">
                  <span class="icon">💾</span>
                  自动保存到题库
                </span>
              </el-checkbox>
          </el-form-item>
          </div>

          <!-- 操作按钮 -->
          <div class="action-section">
            <el-button
              type="primary"
              @click="generateProblem"
              :loading="generating"
              :disabled="!generateForm.topic.trim()"
              size="large"
              class="generate-btn"
            >
              <el-icon class="btn-icon">
              <Star v-if="!generating" />
              </el-icon>
              <span class="btn-text">
                {{ generating ? 'AI正在生成题目...' : '🚀 开始生成题目' }}
              </span>
            </el-button>
            <el-button @click="resetForm" :disabled="generating" class="reset-btn">
              <el-icon><Refresh /></el-icon>
              重置配置
            </el-button>
          </div>`
        </el-form>
      </div>

      <!-- 生成结果区域 -->
      <div v-if="generatedProblem" class="result-section">
        <div class="result-header">
          <div class="result-title">
          <h3>🎯 生成的题目</h3>
            <div class="success-badge">
              <el-icon><Check /></el-icon>
              生成成功
            </div>
          </div>
          <p class="result-subtitle">AI智能生成的高质量题目，可直接使用或进一步编辑</p>
        </div>`

        <div class="problem-preview">
          <el-card class="problem-card">
            <template #header>
              <div class="problem-header">
                <h4>{{ generatedProblem.title }}</h4>
                <div class="problem-meta">
                  <el-tag :type="getDifficultyType(generatedProblem.difficulty)">
                    {{ getDifficultyText(generatedProblem.difficulty) }}
                  </el-tag>
                  <el-tag :type="getTypeTagType(generatedProblem.type || 'code')" size="small">
                    {{ getTypeText(generatedProblem.type || 'code') }}
                  </el-tag>
                  <el-tag v-if="generateForm.problemType === 'code' && generatedProblem.language" type="info">
                    {{ generatedProblem.language.toUpperCase() }}
                  </el-tag>
                  <el-tag v-for="tag in generatedProblem.tags" :key="tag" type="success" size="small">
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
            </template>

            <div class="problem-content">
              <div class="description">
                <h5>题目描述</h5>
                <p>{{ generatedProblem.description }}</p>
              </div>

              <!-- 选择题选项 -->
              <div v-if="generateForm.problemType === 'choice' && generatedProblem.options && generatedProblem.options.length > 0" class="options">
                <h5>选项</h5>
                <div class="options-list">
                  <div v-for="(option, index) in generatedProblem.options" :key="index" class="option-item">
                    <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
                    <span class="option-content">{{ option }}</span>
                  </div>
                </div>
              </div>

              <!-- 编程题特有的格式 -->
              <template v-if="generateForm.problemType === 'code'">
                <div v-if="generatedProblem.input_format" class="input-format">
                  <h5>输入格式</h5>
                  <pre>{{ generatedProblem.input_format }}</pre>
                </div>

                <div v-if="generatedProblem.output_format" class="output-format">
                  <h5>输出格式</h5>
                  <pre>{{ generatedProblem.output_format }}</pre>
                </div>

                <div v-if="generatedProblem.examples && generatedProblem.examples.length > 0" class="examples">
                  <h5>示例</h5>
                  <div v-for="(example, index) in generatedProblem.examples" :key="index" class="example">
                    <div class="example-header">示例 {{ index + 1 }}</div>
                    <div class="example-content">
                      <div class="input">
                        <strong>输入：</strong>
                        <pre>{{ example.input }}</pre>
                      </div>
                      <div class="output">
                        <strong>输出：</strong>
                        <pre>{{ example.output }}</pre>
                      </div>
                      <div v-if="example.explanation" class="explanation">
                        <strong>说明：</strong>
                        <p>{{ example.explanation }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 填空题答案 -->
              <div v-if="generateForm.problemType === 'blank' && generatedProblem.answer" class="answer">
                <h5>参考答案</h5>
                <div class="answer-content">
                  <p>{{ generatedProblem.answer }}</p>
                </div>
              </div>

              <!-- 选择题答案和解析 -->
              <div v-if="generateForm.problemType === 'choice' && generatedProblem.answer" class="answer">
                <h5>正确答案</h5>
                <div class="answer-content">
                  <p><strong>{{ generatedProblem.answer }}</strong></p>
                </div>
              </div>

              <!-- 简答题答案和评分要点 -->
              <div v-if="generateForm.problemType === 'short' && generatedProblem.answer" class="answer">
                <h5>参考答案</h5>
                <div class="answer-content">
                  <p>{{ generatedProblem.answer }}</p>
                </div>
                <div v-if="generatedProblem.scoring_points && generatedProblem.scoring_points.length > 0" class="scoring-points">
                  <h6>评分要点：</h6>
                  <ul>
                    <li v-for="(point, index) in generatedProblem.scoring_points" :key="index">{{ point }}</li>
                  </ul>
                </div>
              </div>

              <!-- 解析说明 -->
              <div v-if="generatedProblem.explanation" class="explanation">
                <h5>解析说明</h5>
                <p>{{ generatedProblem.explanation }}</p>
              </div>

              <!-- 编程题解答 -->
              <div v-if="generateForm.problemType === 'code' && generatedProblem.solution" class="solution">
                <h5>参考解答</h5>
                <div class="approach">
                  <strong>解题思路：</strong>
                  <p>{{ generatedProblem.solution.approach }}</p>
                </div>
                <div class="code">
                  <strong>参考代码：</strong>
                  <pre><code>{{ generatedProblem.solution.code }}</code></pre>
                </div>
                <div class="complexity">
                  <strong>复杂度分析：</strong>
                  <p>{{ generatedProblem.solution.complexity }}</p>
                </div>
              </div>
            </div>
          </el-card>

          <div class="action-buttons">
            <el-button type="success" @click="saveToDatabase" :loading="saving" size="large" class="action-btn save-btn">
              <el-icon><Check /></el-icon>
              <span>💾 保存到题库</span>
            </el-button>
            <el-button type="primary" @click="generateAnother" size="large" class="action-btn generate-another-btn">
              <el-icon><Refresh /></el-icon>
              <span>🔄 生成新题目</span>
            </el-button>
            <el-button @click="copyToClipboard" size="large" class="action-btn copy-btn">
              <el-icon><CopyDocument /></el-icon>
              <span>📋 复制题目</span>
            </el-button>
          </div>`
        </div>
      </div>

      <!-- 生成历史 -->
      <div v-if="generationHistory.length > 0" class="history-section">
        <div class="history-header">
          <h3>📚 生成历史</h3>
          <div class="history-count">
            共 {{ generationHistory.length }} 个题目
          </div>
        </div>`
        
        <el-table :data="generationHistory" style="width: 100%">
          <el-table-column prop="title" label="题目标题" />
          <el-table-column prop="type" label="类型" width="100">
            <template #default="{ row }">
              <el-tag :type="getTypeTagType(row.type)">{{ getTypeText(row.type) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="100">
            <template #default="{ row }">
              <el-tag :type="getDifficultyType(row.difficulty)" size="small">
                {{ getDifficultyText(row.difficulty) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="生成时间" width="180">
            <template #default="{ row }">
              {{ formatTime(row.created_at) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-button size="small" @click="viewHistoryProblem(row)">查看</el-button>
              <el-button size="small" type="success" @click="saveHistoryToDatabase(row)">保存</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Star, Check, Refresh, CopyDocument, Search, Collection } from '@element-plus/icons-vue'
import { 
  generateCodeProblem, 
  generateChoiceProblem, 
  generateBlankProblem, 
  generateShortProblem,
  createProblem
} from '@/api/problems'
import type { CreateProblemRequest } from '@/api/problems'

// 响应式数据
const generating = ref(false)
const saving = ref(false)
const generatedProblem = ref<any>(null)
const generationHistory = ref<any[]>([])

// 生成表单
const generateForm = reactive({
  problemType: 'code' as 'code' | 'choice' | 'blank' | 'short',
  topic: '',
  difficulty: 'medium' as 'easy' | 'medium' | 'hard',
  language: 'python' as 'python' | 'cpp' | 'java' | 'javascript',
  knowledgePoints: '',
  algorithmType: '',
  questionType: 'single' as 'single' | 'multiple',
  optionCount: 4,
  blankCount: 3,
  autoSave: false
})

// 生成题目
const generateProblem = async () => {
  if (!generateForm.topic.trim()) {
    ElMessage.warning('请输入题目主题')
    return
  }

  generating.value = true
  try {
    let result: any

    switch (generateForm.problemType) {
      case 'code':
        result = await generateCodeProblem({
          topic: generateForm.topic,
          difficulty: generateForm.difficulty,
          language: generateForm.language === 'javascript' ? 'python' : generateForm.language as 'python' | 'cpp' | 'java',
          auto_save: generateForm.autoSave
        })
        break
      case 'choice':
        result = await generateChoiceProblem({
          topic: generateForm.topic,
          difficulty: generateForm.difficulty,
          question_type: generateForm.questionType,
          option_count: generateForm.optionCount,
          auto_save: generateForm.autoSave
        })
        break
      case 'blank':
        result = await generateBlankProblem({
          topic: generateForm.topic,
          difficulty: generateForm.difficulty,
          blank_count: generateForm.blankCount,
          auto_save: generateForm.autoSave
        })
        break
      case 'short':
        result = await generateShortProblem({
          topic: generateForm.topic,
          difficulty: generateForm.difficulty,
          auto_save: generateForm.autoSave
        })
        break
    }

    if (result.success) {
      generatedProblem.value = result.problem
      
      // 添加到历史记录
      generationHistory.value.unshift({
        ...result.problem,
        created_at: new Date().toISOString()
      })

      ElMessage.success('题目生成成功！')
      
      // 如果设置了自动保存，直接保存到数据库
      if (generateForm.autoSave && result.saved_problem_id) {
        ElMessage.success(`题目已自动保存到题库，ID: ${result.saved_problem_id}`)
      }
    } else {
      ElMessage.error(`生成失败: ${result.error}`)
    }
  } catch (error: any) {
    ElMessage.error(`生成失败: ${error.message}`)
  } finally {
    generating.value = false
  }
}

// 保存到数据库
const saveToDatabase = async () => {
  if (!generatedProblem.value) return

  saving.value = true
  try {
    console.log('准备保存题目数据:', generatedProblem.value)
    
    const problemData: CreateProblemRequest = {
      title: generatedProblem.value.title || '未命名题目',
      description: generatedProblem.value.description || '',
      type: generateForm.problemType,
      difficulty: generatedProblem.value.difficulty || generateForm.difficulty,
      points: 10,
      language: (generateForm.problemType === 'code' ? 
        (generateForm.language === 'javascript' ? 'python' : generateForm.language as 'python' | 'cpp' | 'java') : 
        'python')
    }

    // 根据题目类型添加特定字段
    if (generateForm.problemType === 'code') {
      problemData.test_cases = generatedProblem.value.test_cases || []
      problemData.answer = generatedProblem.value.solution?.code || generatedProblem.value.answer || ''
      problemData.input_format = generatedProblem.value.input_format || ''
      problemData.output_format = generatedProblem.value.output_format || ''
      problemData.time_limit = 1000
      problemData.memory_limit = 64
    } else if (generateForm.problemType === 'choice') {
      problemData.options = generatedProblem.value.options || []
      problemData.answer = generatedProblem.value.answer || ''
    } else if (generateForm.problemType === 'blank') {
      problemData.answer = generatedProblem.value.answer || ''
    } else if (generateForm.problemType === 'short') {
      problemData.answer = generatedProblem.value.answer || generatedProblem.value.solution?.code || ''
    }

    console.log('发送的题目数据:', problemData)
    
    const result = await createProblem(problemData)
    console.log('保存结果:', result)
    
    ElMessage.success(`题目已保存到题库，ID: ${result.id}`)
    
    // 从历史记录中移除已保存的题目
    const index = generationHistory.value.findIndex(p => p.title === generatedProblem.value?.title)
    if (index > -1) {
      generationHistory.value.splice(index, 1)
    }
    
    // 保存历史记录到localStorage
    localStorage.setItem('ai_problem_history', JSON.stringify(generationHistory.value))
    
  } catch (error: any) {
    console.error('保存题目失败:', error)
    ElMessage.error(`保存失败: ${error.message || error}`)
  } finally {
    saving.value = false
  }
}

// 生成新题目
const generateAnother = () => {
  generatedProblem.value = null
  generateForm.topic = ''
}

// 复制题目
const copyToClipboard = async () => {
  if (!generatedProblem.value) return

  const text = JSON.stringify(generatedProblem.value, null, 2)
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('题目已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}

// 重置表单
const resetForm = () => {
  Object.assign(generateForm, {
    problemType: 'code',
    topic: '',
    difficulty: 'medium',
    language: 'python',
    knowledgePoints: '',
    algorithmType: '',
    questionType: 'single',
    optionCount: 4,
    blankCount: 3,
    autoSave: false
  })
  generatedProblem.value = null
}

// 查看历史题目
const viewHistoryProblem = (problem: any) => {
  generatedProblem.value = problem
}

// 保存历史题目到数据库
const saveHistoryToDatabase = async (problem: any) => {
  try {
    console.log('保存历史题目:', problem)
    
    const problemData: CreateProblemRequest = {
      title: problem.title || '未命名题目',
      description: problem.description || '',
      type: problem.type || 'code',
      difficulty: problem.difficulty || 'medium',
      points: 10,
      language: problem.language || 'python'
    }

    // 根据题目类型添加特定字段
    if (problem.type === 'code') {
      problemData.test_cases = problem.test_cases || []
      problemData.answer = problem.solution?.code || problem.answer || ''
      problemData.input_format = problem.input_format || ''
      problemData.output_format = problem.output_format || ''
      problemData.time_limit = 1000
      problemData.memory_limit = 64
    } else if (problem.type === 'choice') {
      problemData.options = problem.options || []
      problemData.answer = problem.answer || ''
    } else if (problem.type === 'blank') {
      problemData.answer = problem.answer || ''
    } else if (problem.type === 'short') {
      problemData.answer = problem.answer || problem.solution?.code || ''
    }

    console.log('历史题目保存数据:', problemData)
    
    const result = await createProblem(problemData)
    console.log('历史题目保存结果:', result)
    
    ElMessage.success(`题目已保存到题库，ID: ${result.id}`)
    
    // 从历史记录中移除已保存的题目
    const index = generationHistory.value.findIndex(p => p.title === problem.title)
    if (index > -1) {
      generationHistory.value.splice(index, 1)
    }
    
    // 保存历史记录到localStorage
    localStorage.setItem('ai_problem_history', JSON.stringify(generationHistory.value))
    
  } catch (error: any) {
    console.error('历史题目保存失败:', error)
    ElMessage.error(`保存失败: ${error.message || error}`)
  }
}

// 工具函数
const getDifficultyType = (difficulty: string) => {
  const types: Record<string, string> = {
    easy: 'success',
    medium: 'warning',
    hard: 'danger'
  }
  return types[difficulty] || 'info'
}

const getDifficultyText = (difficulty: string) => {
  const texts: Record<string, string> = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return texts[difficulty] || difficulty
}

const getTypeText = (type: string) => {
  const texts: Record<string, string> = {
    code: '编程题',
    choice: '选择题',
    blank: '填空题',
    short: '简答题'
  }
  return texts[type] || type
}

const getTypeTagType = (type: string) => {
  const types: Record<string, string> = {
    code: 'primary',
    choice: 'success',
    blank: 'warning',
    short: 'info'
  }
  return types[type] || 'info'
}

const formatTime = (time: string) => {
  return new Date(time).toLocaleString('zh-CN')
}

// 组件挂载时加载历史记录
onMounted(() => {
  // 从localStorage加载历史记录
  const history = localStorage.getItem('ai_problem_history')
  if (history) {
    try {
      generationHistory.value = JSON.parse(history)
    } catch (error) {
      console.error('加载历史记录失败:', error)
    }
  }
})

// 保存历史记录到localStorage
const saveHistoryToStorage = () => {
  localStorage.setItem('ai_problem_history', JSON.stringify(generationHistory.value))
}

// 监听历史记录变化，自动保存
watch(generationHistory, saveHistoryToStorage, { deep: true })
</script>

<style scoped lang="scss">
.ai-problem-generator {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0;
}

/* 页面头部美化 */
.page-header {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 40px;
}

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    #667eea 0%, 
    #764ba2 25%, 
    #f093fb 50%, 
    #f5576c 75%, 
    #4facfe 100%);
  animation: gradientShift 8s ease-in-out infinite;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(1px);
}

.floating-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 150px;
  height: 150px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.shape-2 {
  width: 100px;
  height: 100px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.shape-3 {
  width: 200px;
  height: 200px;
  bottom: 20%;
  left: 60%;
  animation-delay: 4s;
}

.header-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
  max-width: 800px;
  padding: 0 20px;
}

.header-icon {
  margin-bottom: 20px;
  
  .pulse-glow {
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    animation: pulseGlow 2s ease-in-out infinite;
  }
}

.main-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin: 0 0 20px 0;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
}

.main-subtitle {
  font-size: 1.3rem;
  margin: 0 0 30px 0;
  line-height: 1.6;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  opacity: 0.95;
}

.feature-badges {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  
  &:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
  }
}

/* 生成器卡片 */
.generator-card {
  margin: 0 20px 40px 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: none;
  overflow: hidden;
}

.section-header {
  text-align: center;
  
  h3 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
  }
  
  p {
    color: #7f8c8d;
    margin: 0;
    font-size: 1rem;
  }
}

.config-section {
  padding: 30px;
  background: #f8fafc;
}

/* 配置组样式 */
.config-group {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  
  &.special-config {
    border-left: 4px solid #4f46e5;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  }
}

.group-title {
  margin-bottom: 20px;
  
  h4 {
    font-size: 1.3rem;
    color: #1e293b;
    margin: 0 0 6px 0;
    font-weight: 600;
  }
  
  p {
    color: #64748b;
    margin: 0;
    font-size: 0.9rem;
  }
}

/* 题目类型选择器 */
.type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  
  .type-btn {
    flex: 1;
    min-width: 120px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #4f46e5;
      transform: translateY(-2px);
    }
    
    &.is-active {
      border-color: #4f46e5;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      color: white;
    }
  }
  
  .btn-content {
    display: flex;
    flex-direction: column;
  align-items: center;
    gap: 4px;
    padding: 8px;
    
    .icon {
      font-size: 1.2rem;
    }
    
    span:last-child {
      font-size: 0.85rem;
      font-weight: 500;
    }
  }
}

/* 难度选择器 */
.difficulty-select {
  width: 100%;
  
  .el-input__wrapper {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}

/* 主题输入框 */
.topic-input {
  .el-input__wrapper {
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #4f46e5;
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
    }
    
    &.is-focus {
      border-color: #4f46e5;
      box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    }
  }
}

/* 语言和算法选择器 */
.language-select, .algorithm-select {
  width: 100%;
  
  .el-input__wrapper {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
}

/* 单选/多选题型组 */
.question-type-group {
  .el-radio-button {
    border-radius: 12px;
    margin-right: 12px;
    
    .radio-content {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      
      .icon {
        font-size: 1rem;
      }
    }
  }
}

/* 计数器样式 */
.option-counter, .blank-counter {
  .el-input-number {
    width: 120px;
  }
}

.counter-hint {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #64748b;
  font-style: italic;
}

/* 知识点输入框 */
.knowledge-input {
  .el-input__wrapper {
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #059669;
      box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1);
    }
  }
}

/* 自动保存选项 */
.auto-save-item {
  margin-bottom: 0;
}

.auto-save-checkbox {
  .checkbox-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #1e293b;
    
    .icon {
      font-size: 1.1rem;
    }
  }
}

.generate-form {
  max-width: 800px;
}

/* 操作按钮区域 */
.action-section {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 32px 0;
  border-top: 1px solid #e2e8f0;
  margin-top: 24px;
  flex-wrap: wrap;
}

.generate-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border: none;
  border-radius: 16px;
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.4);
  }
  
  &:active {
    transform: translateY(-1px);
  }
  
  .btn-icon {
    margin-right: 8px;
    font-size: 1.2rem;
  }
  
  .btn-text {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.reset-btn {
  border-radius: 16px;
  padding: 16px 24px;
  font-weight: 500;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: #f59e0b;
    color: #f59e0b;
    transform: translateY(-2px);
  }
}

/* 结果区域 */
.result-section {
  margin: 40px 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.result-header {
  text-align: center;
  margin-bottom: 32px;
  
  .result-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
    
    h3 {
      font-size: 2rem;
      color: #1e293b;
      margin: 0;
      font-weight: 700;
    }
    
    .success-badge {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
      padding: 8px 16px;
      border-radius: 25px;
      font-size: 0.9rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }
  }
  
  .result-subtitle {
    color: #64748b;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.6;
  }
}

.problem-preview {
  margin-top: 20px;
}

.problem-card {
  border-radius: 20px;
  border: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  margin-bottom: 24px;
  
  .el-card__header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
  }
}

.problem-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  
  h4 {
    margin: 0;
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 700;
  }
}

.problem-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.problem-content {
  line-height: 1.7;
  
  h5 {
    color: #4f46e5;
    margin: 24px 0 12px 0;
    font-size: 1.2rem;
    font-weight: 600;
    border-left: 4px solid #4f46e5;
    padding-left: 12px;
    
    &:first-child {
      margin-top: 0;
    }
  }
}

.description p {
  margin: 0;
  color: #374151;
  font-size: 1rem;
}

.input-format pre,
.output-format pre {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 16px;
  border-radius: 12px;
  margin: 12px 0;
  font-family: 'Fira Code', 'Consolas', monospace;
  white-space: pre-wrap;
  border: 1px solid #cbd5e1;
  font-size: 0.95rem;
}

.examples {
  margin-top: 24px;
}

.example {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.example-header {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 1rem;
}

.example-content {
  padding: 20px;
  
  .input, .output {
    margin-bottom: 16px;
    
    strong {
      color: #1e293b;
      font-weight: 600;
    }
  }
  
  pre {
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
    margin: 8px 0;
    font-family: 'Fira Code', 'Consolas', monospace;
    white-space: pre-wrap;
    border: 1px solid #e2e8f0;
    font-size: 0.9rem;
  }
  
  .explanation {
    background: #fffbeb;
    padding: 16px;
    border-radius: 12px;
    border-left: 4px solid #f59e0b;
    
    strong {
      color: #92400e;
    }
    
    p {
      margin: 8px 0 0 0;
      color: #78350f;
    }
  }
}

.solution {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 16px;
  border: 1px solid #0ea5e9;
  
  .approach, .complexity {
    margin-bottom: 20px;
    
    strong {
      color: #0c4a6e;
      font-weight: 600;
    }
    
    p {
      margin: 8px 0 0 0;
      color: #075985;
      line-height: 1.6;
    }
  }
  
  .code {
    pre {
      background: #1e293b;
      color: #e2e8f0;
      padding: 20px;
      border-radius: 12px;
      overflow-x: auto;
      font-family: 'Fira Code', 'Consolas', monospace;
      box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
      
      code {
        font-size: 0.9rem;
        line-height: 1.5;
      }
    }
  }
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}

.action-btn {
  border-radius: 16px;
  padding: 14px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  justify-content: center;
  
  &:hover {
    transform: translateY(-3px);
  }
  
  span {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

.save-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
  
  &:hover {
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.4);
  }
}

.generate-another-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
  
  &:hover {
    box-shadow: 0 10px 28px rgba(59, 130, 246, 0.4);
  }
}

.copy-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  color: white;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
  
  &:hover {
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.4);
  }
}

/* 历史记录区域 */
.history-section {
  margin: 40px 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 4px;
  
  h3 {
    font-size: 1.8rem;
    color: #1e293b;
    margin: 0;
    font-weight: 700;
  }
  
  .history-count {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
  }
}

/* 动画效果 */
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(5deg);
  }
  66% {
    transform: translateY(10px) rotate(-3deg);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 40px rgba(79, 70, 229, 0.5);
    transform: scale(1.05);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ai-problem-generator {
    padding: 0;
  }
  
  .page-header {
    min-height: 300px;
  }
  
  .header-content {
    padding: 0 16px;
  }
  
  .main-title {
    font-size: 2.5rem;
  }
  
  .main-subtitle {
    font-size: 1.1rem;
  }
  
  .feature-badges {
    gap: 8px;
  }
  
  .badge {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
  
  .generator-card {
    margin: 0 16px 32px 16px;
    border-radius: 16px;
  }
  
  .config-section {
    padding: 20px;
  }
  
  .config-group {
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .type-selector {
    flex-direction: column;
    gap: 8px;
    
    .type-btn {
      min-width: 100%;
    }
  }
  
  .action-section {
    flex-direction: column;
    gap: 12px;
    padding: 24px 0;
  }
  
  .generate-btn, .reset-btn {
    width: 100%;
    min-width: auto;
  }
  
  .problem-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    
    h4 {
      font-size: 1.3rem;
    }
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 12px;
  }
  
  .action-btn {
    width: 100%;
    min-width: auto;
  }
  
  .result-section,
  .history-section {
    margin: 32px 16px;
  }
  
  .result-header .result-title {
    flex-direction: column;
    gap: 12px;
    
    h3 {
      font-size: 1.6rem;
    }
  }
  
  .history-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    
    h3 {
      font-size: 1.6rem;
    }
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 2rem;
  }
  
  .main-subtitle {
    font-size: 1rem;
  }
  
  .shape-1, .shape-2, .shape-3 {
    display: none;
  }
}

.problem-preview {
  margin-top: 20px;
}

.problem-card {
  margin-bottom: 20px;
}

.problem-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.problem-header h4 {
  margin: 0;
  color: #303133;
}

.problem-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.problem-content {
  line-height: 1.6;
}

.problem-content h5 {
  color: #409eff;
  margin: 20px 0 10px 0;
  font-size: 16px;
}

.problem-content h5:first-child {
  margin-top: 0;
}

.description p {
  margin: 0;
  color: #606266;
}

.input-format pre,
.output-format pre {
  background: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
}

.examples {
  margin-top: 20px;
}

.example {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-bottom: 15px;
}

.example-header {
  background: #f5f7fa;
  padding: 8px 12px;
  font-weight: bold;
  border-bottom: 1px solid #e4e7ed;
}

.example-content {
  padding: 12px;
}

.example-content .input,
.example-content .output {
  margin-bottom: 10px;
}

.example-content pre {
  background: #f5f7fa;
  padding: 8px;
  border-radius: 4px;
  margin: 5px 0;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
}

.solution {
  margin-top: 20px;
  padding: 15px;
  background: #f0f9ff;
  border-radius: 4px;
}

.solution .approach,
.solution .complexity {
  margin-bottom: 15px;
}

.solution .code pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
}

.action-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.history-section {
  margin-top: 30px;
}

@media (max-width: 768px) {
  .ai-problem-generator {
    padding: 10px;
  }
  
  .problem-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style>
